<!--
* 选择【职员信息】弹出框组件，dialog弹框最小宽度为800px
* 属性
* isMulti：是否多选，默认false
* 事件
* Cancel：取消后执行事件，无参数
* Ok：确定后执行事件，参数：[{ empid, empcode, empname, sex, birthday, idcard, orgid, orgname, obj }]
-->
<template>
  <div class="selectemp">
    <el-scrollbar height="400px">
      <div class="div-scrollbar">
        <el-container>
          <el-aside class="container-org" width="220px">
            <el-tree
              node-key="forgid"
              lazy
              accordion
              highlight-current
              :expand-on-click-node="false"
              :props="pageData.treeParams.props"
              :load="treeLoad"
              :default-expanded-keys="pageData.treeParams.defaultExpKeys"
              @current-change="onHandleTreeCurrentChange"
            >
            </el-tree>
          </el-aside>
          <el-main class="container-content">
            <el-row class="row-header">
              <el-col :span="12"> </el-col>
              <el-col :span="12" style="text-align: right">
                <el-input
                  v-model="pageData.queryParams.keyword"
                  clearable
                  placeholder="按编号/名称搜索"
                  prefix-icon="search"
                  style="max-width: 180px"
                  @blur="onHandleKeywordBlur"
                  @clear="onHandleKeywordBlur"
                >
                </el-input>
              </el-col>
            </el-row>
            <el-row class="row-content">
              <el-col>
                <el-table
                  ref="empTable"
                  class="emptable"
                  row-key="fempid"
                  stripe
                  border
                  v-loading="pageData.tableParams.tableLoading"
                  :highlight-current-row="!pageData.tableParams.isMulti"
                  :data="pageData.tableParams.tableData"
                  @selection-change="onHandleTableSelectionChange"
                  @current-change="onHandleTableCurrentChange"
                >
                  <el-table-column
                    v-if="pageData.tableParams.isMulti"
                    type="selection"
                    width="45"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="fcode"
                    label="编号"
                    min-width="120"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="fduty"
                    label="职务"
                    width="110"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="fname"
                    label="名称"
                    width="100"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="fsex"
                    label="性别"
                    width="60"
                    align="center"
                    :formatter="sexFormatter"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="fmobile"
                    label="手机"
                    width="100"
                    align="center"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
                <el-col :span="24">
                  <el-pagination
                    style="margin-top: 20px"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="pageData.tableParams.pageSizeOptions"
                    :current-page="pageData.queryParams.pageIndex"
                    :page-size="pageData.queryParams.pageSize"
                    :total="pageData.tableParams.total"
                    @current-change="onHandleCurrentChange"
                    @size-change="onHandleSizeChange"
                  >
                  </el-pagination>
                </el-col>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </div>
    </el-scrollbar>
    <el-row>
      <el-col :span="24" style="text-align: right; margin-top: 5px">
        <el-button @click="onHandleCancel">取 消</el-button>
        <el-button type="primary" @click="onHandleSure">确 定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import utils from "@/common/utils";
import enums from "@/common/enums";
// const lodash = require("lodash");

import { getOrgList, queryPageList } from "@/api/system";

export default {
  name: "SelectEmp",
  components: {},
  props: {
    // rootOrgId: { type: String, required: true, default: "rootid" },
    isMulti: { type: Boolean, default: false },
  },
  setup(props, context) {
    onMounted(() => {});

    const empTable = ref();
    const pageState = reactive({
      pageData: {
        sexEnumObj: enums.SexEnum,
        treeParams: {
          props: {
            label: "fname",
            children: "children",
            isLeaf: "isleaf",
          },
          defaultExpKeys: [],
          currentNode: {},
        },
        queryParams: {
          pageIndex: 1,
          pageSize: 10,
          sortFields: "",
          orgid: "",
          keyword: "",
          state: enums.StateEnum.Enable.value,
        },
        tableParams: {
          tableLoading: false,
          tableHeight: 0,
          // tableColumns: [],
          pageSizeOptions: ["10", "15", "30", "50", "100", "200"],
          total: 0,
          tableData: [],
          multipleSelection: [],
          currentRow: {},
          isMulti: props.isMulti,
        },
      },
    });
    const pageFunc = {
      treeLoad: (node, resolve) => {
        const flag = node.level === 0;
        const orgid = flag ? "" : node.data.forgid;
        getOrgList(orgid)
          .then((ret) => {
            if (flag && ret.length > 0) {
              pageState.pageData.treeParams.defaultExpKeys = [ret[0].forgid];
            }
            resolve(ret);
          })
          .catch((error) => {
            ElMessage.error(error.message || "请求出错");
          });
      },
      getTableData: () => {
        pageState.pageData.tableParams.multipleSelection = [];
        pageState.pageData.tableParams.currentRow = {};
        pageState.pageData.tableParams.tableLoading = true;
        queryPageList(pageState.pageData.queryParams)
          .then((ret) => {
            pageState.pageData.tableParams.tableData = ret.data;
            pageState.pageData.tableParams.total = ret.recordsTotal;
            pageState.pageData.tableParams.tableLoading = false;
          })
          .catch((error) => {
            ElMessage.error(error.message || "请求出错");
            pageState.pageData.tableParams.tableLoading = false;
          });
      },
      sexFormatter: (row, column, cellValue, index) => {
        return pageState.pageData.sexEnumObj.getLabelByValue(cellValue);
      },
      onHandleTreeCurrentChange: (data) => {
        pageState.pageData.treeParams.currentNode = data;
        pageState.pageData.queryParams.keyword = "";
        pageState.pageData.queryParams.pageIndex = 1;
        pageState.pageData.queryParams.orgid = data.forgid;
        pageFunc.getTableData();
      },
      onHandleCurrentChange: (e) => {
        pageState.pageData.queryParams.pageIndex = e;
        pageFunc.getTableData();
      },
      onHandleSizeChange: (e) => {
        pageState.pageData.queryParams.pageIndex = 1;
        pageState.pageData.queryParams.pageSize = e;
        pageFunc.getTableData();
      },
      onHandleKeywordBlur: () => {
        pageState.pageData.queryParams.pageIndex = 1;
        pageFunc.getTableData();
      },
      onHandleTableSelectionChange: (rowArr) => {
        pageState.pageData.tableParams.multipleSelection = rowArr;
        pageState.pageData.tableParams.currentRow = {};
      },
      onHandleTableCurrentChange: (row) => {
        if (!pageState.pageData.tableParams.isMulti) {
          pageState.pageData.tableParams.multipleSelection = [row];
          pageState.pageData.tableParams.currentRow = row;
        }
      },

      onHandleCancel: () => {
        context.emit("cancel");
      },
      onHandleSure: () => {
        if (
          utils.isEmpty(pageState.pageData.tableParams.multipleSelection) ||
          pageState.pageData.tableParams.multipleSelection.length < 1
        ) {
          ElMessage.warning("请选择职员");
          return;
        }
        const selectObjs = pageState.pageData.tableParams.multipleSelection.map(
          (p) => {
            return {
              empid: p.fempid,
              empcode: p.fcode,
              empname: p.fname,
              sex: p.fsex,
              birthday: p.fbirthday,
              idcard: p.fidcardno,
              orgid: p.forgid,
              orgname: p.forgname,
              obj: p,
            };
          }
        );
        context.emit("ok", selectObjs);
      },
    };

    return {
      empTable,
      ...toRefs(pageState),
      ...pageFunc,
    };
  },
};
</script>

<style lang="scss">
.selectemp {
  height: 100%;
  min-width: 784px;
  background-color: white;
  .div-scrollbar {
    width: calc(100% - 6px);
    border-top: solid 1px var(--el-border-color-light);
    border-bottom: solid 1px var(--el-border-color-light);
    .container-org {
      border-right: solid 1px var(--el-border-color-light);
    }
    .container-content {
      height: 398px;
      padding: 0px 8px !important;
      .row-content {
        .emptable {
          // 5+34+5+34+5=83px
          height: calc(400px - 83px) !important;
          .el-table__body-wrapper {
            height: calc(400px - 83px - 41px);
            overflow-y: auto;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped="scoped">
.selectemp {
  .div-scrollbar {
    .container-content {
      .el-row {
        margin: 5px 0;
      }
    }
  }
}
</style>
